<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>二手易购 - 个人中心</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 全局样式 */
    :root {
      --primary: #1a1a1a;
      --secondary: #333333;
      --accent: #666666;
      --light: #f5f5f5;
      --white: #ffffff;
      --dark: #000000;
      --light-gray: #e0e0e0;
      --medium-gray: #999999;
      --success: #28a745;
      --error: #dc3545;
      --warning: #ffc107;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      --transition: all 0.2s ease;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f8f9fa 0%, #eef0f2 100%);
      color: var(--dark);
      min-height: 100vh;
      padding-bottom: 80px;
    }

    /* 顶部导航栏 */
    .navbar {
      background: var(--white);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      padding: 12px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .logo {
      display: flex;
      align-items: center;
      transform-origin: left center;
    }

    .logo:hover {
      transform: scale(1.03);
    }

    .logo h1 {
      font-size: 22px;
      font-weight: 700;
      color: var(--dark);
      margin-left: 8px;
      letter-spacing: -0.5px;
    }

    .logo i {
      font-size: 24px;
      color: var(--accent);
    }

    .nav-links {
      display: flex;
      gap: 20px;
    }

    .nav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: var(--dark);
      font-size: 13px;
      transition: var(--transition);
      position: relative;
      padding: 4px 8px;
      border-radius: 6px;
    }

    .nav-link i {
      font-size: 18px;
      margin-bottom: 3px;
    }

    .nav-link:hover {
      color: var(--accent);
      background-color: rgba(0, 0, 0, 0.03);
    }

    .nav-link .badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background-color: var(--error);
      color: var(--white);
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    .user-menu {
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
    }

    .user-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-left: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .user-avatar i {
      font-size: 18px;
      color: var(--accent);
    }

    .dropdown-menu {
      position: absolute;
      top: 50px;
      right: 0;
      background: var(--white);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
      border-radius: 10px;
      width: 180px;
      overflow: hidden;
      display: none;
      z-index: 1000;
    }

    .dropdown-menu.show {
      display: block;
    }

    .dropdown-item {
      padding: 10px 16px;
      display: flex;
      align-items: center;
      text-decoration: none;
      color: var(--dark);
      transition: var(--transition);
      position: relative;
      font-size: 14px;
    }

    .dropdown-item:hover {
      background-color: rgba(0, 0, 0, 0.05);
      padding-left: 20px;
    }

    .dropdown-item:hover::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 3px;
      background: var(--dark);
    }

    .dropdown-item i {
      margin-right: 8px;
      width: 18px;
      text-align: center;
      font-size: 14px;
    }

    .divider {
      height: 1px;
      background-color: var(--light-gray);
      margin: 4px 0;
    }

    /* 内容区域 */
    .container {
      max-width: 1300px;
      margin: 25px auto;
      padding: 0 20px;
    }

    /* 页面标题 */
    .page-title {
      text-align: center;
      margin: 35px 0 45px;
      position: relative;
    }

    .page-title h2 {
      font-size: 32px;
      font-weight: 800;
      letter-spacing: -1px;
      margin-bottom: 12px;
    }

    .page-title p {
      font-size: 17px;
      color: var(--medium-gray);
      max-width: 550px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .page-title::after {
      content: '';
      position: absolute;
      bottom: -18px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 3px;
      background: var(--dark);
      border-radius: 2px;
    }

    /* 个人中心布局 */
    .profile-container {
      display: flex;
      gap: 30px;
      margin-top: 30px;
    }

    @media (max-width: 992px) {
      .profile-container {
        flex-direction: column;
      }
    }

    /* 信息卡片 */
    .info-card {
      flex: 1;
      background: var(--white);
      border-radius: 16px;
      padding: 30px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .info-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: var(--dark);
    }

    .info-card h3 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 25px;
      color: var(--dark);
      position: relative;
      padding-bottom: 10px;
    }

    .info-card h3::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 3px;
      background: var(--dark);
      border-radius: 2px;
    }

    .user-avatar-large {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e0e0e0, #f0f0f0);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 48px;
      color: var(--accent);
      overflow: hidden;
    }

    .user-avatar-large img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .user-info {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .info-item {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid var(--light-gray);
      padding-bottom: 15px;
    }

    .info-label {
      font-size: 14px;
      color: var(--medium-gray);
      margin-bottom: 5px;
      display: flex;
      align-items: center;
    }

    .info-label i {
      margin-right: 8px;
      width: 20px;
      text-align: center;
    }

    .info-value {
      font-size: 18px;
      font-weight: 600;
      color: var(--dark);
      padding-left: 28px;
    }

    .bio-content {
      font-size: 16px;
      line-height: 1.6;
      color: #444;
      padding-left: 28px;
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid var(--light-gray);
      border-radius: 8px;
      padding: 12px;
      background-color: #f9f9f9;
      margin-top: 5px;
    }

    .balance-display {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, #f8f9fa, #f0f2f4);
      padding: 20px;
      border-radius: 12px;
      margin-top: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      border: 1px solid rgba(0,0,0,0.05);
    }

    .balance-label {
      font-size: 18px;
      color: var(--medium-gray);
      font-weight: 500;
    }

    .balance-amount {
      font-size: 32px;
      font-weight: 800;
      color: var(--dark);
      letter-spacing: -1px;
    }

    /* 表单卡片 */
    .form-card {
      flex: 1;
      background: var(--white);
      border-radius: 16px;
      padding: 30px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    .form-section {
      border-bottom: 1px solid var(--light-gray);
      padding-bottom: 25px;
    }

    .form-section:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .form-section h4 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
      color: var(--dark);
      position: relative;
      padding-bottom: 10px;
    }

    .form-section h4::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 3px;
      background: var(--dark);
      border-radius: 2px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--dark);
      position: relative;
      padding-left: 25px;
    }

    .form-label i {
      position: absolute;
      left: 0;
      top: 2px;
      color: var(--accent);
    }

    .form-control {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid var(--light-gray);
      border-radius: 10px;
      font-size: 15px;
      transition: var(--transition);
      background-color: var(--white);
      color: var(--dark);
      outline: none;
    }

    .form-textarea {
      min-height: 120px;
      resize: vertical;
    }

    .form-control:focus {
      border-color: var(--dark);
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
    }

    .form-control::placeholder {
      color: var(--medium-gray);
    }

    .form-hint {
      font-size: 13px;
      color: var(--medium-gray);
      margin-top: 5px;
      display: block;
      padding-left: 25px;
    }

    .char-counter {
      text-align: right;
      font-size: 13px;
      color: var(--medium-gray);
      margin-top: 5px;
    }

    .char-counter.warning {
      color: var(--warning);
    }

    .char-counter.error {
      color: var(--error);
    }

    .action-buttons {
      display: flex;
      gap: 15px;
      margin-top: 10px;
    }

    .btn {
      padding: 14px 25px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      position: relative;
      overflow: hidden;
      letter-spacing: 0.5px;
    }

    .btn i {
      margin-right: 8px;
    }

    .btn-dark {
      background: var(--dark);
      color: var(--white);
      flex: 1;
      box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    }

    .btn-dark:hover {
      background: #111;
      transform: translateY(-3px);
      box-shadow: 0 10px 22px rgba(0,0,0,0.25);
    }

    .btn-outline {
      background: transparent;
      border: 2px solid var(--dark);
      color: var(--dark);
      flex: 1;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .btn-outline:hover {
      background-color: var(--dark);
      color: var(--white);
      transform: translateY(-3px);
      box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }

      .action-buttons {
        flex-direction: column;
      }
    }

    /* 通知 */
    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 25px;
      border-radius: 10px;
      background-color: var(--success);
      color: white;
      font-weight: 600;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      z-index: 3000;
      font-size: 15px;
      display: none;
      animation: slideIn 0.3s ease, fadeOut 0.5s ease 2.5s;
    }

    .notification.error {
      background-color: var(--error);
    }

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

  </style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar">
  <div class="logo">
    <i class="fas fa-recycle"></i>
    <h1>二手易购</h1>
  </div>

  <div class="nav-links">
    <a href="productPage.html" class="nav-link">
      <i class="fas fa-home"></i>
      <span>首页</span>
    </a>
    <a href="my-goods.html" class="nav-link" id="myGoodsLink">
      <i class="fas fa-box"></i>
      <span>我的商品</span>
    </a>
    <a href="orders.html" class="nav-link" id="ordersLink">
      <i class="fas fa-file-invoice"></i>
      <span>订单</span>
    </a>
    <a href="my-comments.html" class="nav-link" id="commentsLink">
      <i class="fas fa-comment-alt"></i>
      <span>评论</span>
    </a>
    <a href="cart.html" class="nav-link" id="cartLink">
      <i class="fas fa-shopping-cart"></i>
      <span>购物车</span>
    </a>
  </div>

  <div class="user-menu" id="userMenu">
    <span id="usernameDisplay">游客</span>
    <div class="user-avatar">
      <i class="fas fa-user"></i>
    </div>
    <div class="dropdown-menu" id="dropdownMenu">
      <a href="#" class="dropdown-item" id="profileLink">
        <i class="fas fa-user-circle"></i>个人中心
      </a>
      <div class="divider"></div>
      <a href="#" class="dropdown-item" id="logoutLink">
        <i class="fas fa-sign-out-alt"></i>退出登录
      </a>
    </div>
  </div>
</nav>

<!-- 主内容区域 -->
<div class="container">
  <div class="page-title">
    <h2>个人中心</h2>
    <p>管理您的个人信息、安全设置和账户余额</p>
  </div>

  <div class="profile-container">
    <!-- 左侧：用户信息卡片 -->
    <div class="info-card">
      <h3>个人信息</h3>
      <div class="user-avatar-large">
        <i class="fas fa-user"></i>
      </div>

      <div class="user-info">
        <div class="info-item">
          <div class="info-label"><i class="fas fa-user"></i> 用户名</div>
          <div class="info-value" id="profileUsername">加载中...</div>
        </div>

        <div class="info-item">
          <div class="info-label"><i class="fas fa-phone"></i> 电话</div>
          <div class="info-value" id="profilePhone">加载中...</div>
        </div>

        <div class="info-item">
          <div class="info-label"><i class="fas fa-info-circle"></i> 个人简介</div>
          <div class="bio-content" id="profileBio">这个人很懒，什么都没有留下...</div>
        </div>

        <div class="balance-display">
          <div class="balance-label">账户余额</div>
          <div class="balance-amount" id="profileBalance">¥0.00</div>
        </div>
      </div>
    </div>

    <!-- 右侧：表单卡片 -->
    <div class="form-card">
      <!-- 修改电话 -->
      <div class="form-section">
        <h4><i class="fas fa-mobile-alt"></i> 修改电话</h4>
        <div class="form-group">
          <label for="phoneInput" class="form-label">
            <i class="fas fa-phone"></i> 新电话号码
          </label>
          <input type="tel" id="phoneInput" class="form-control" placeholder="输入新的电话号码">
        </div>
        <div class="action-buttons">
          <button class="btn btn-dark" id="savePhoneBtn">
            <i class="fas fa-save"></i> 保存更改
          </button>
        </div>
      </div>

      <!-- 新增：修改个人简介 -->
      <div class="form-section">
        <h4><i class="fas fa-edit"></i> 修改个人简介</h4>
        <div class="form-group">
          <label for="bioInput" class="form-label">
            <i class="fas fa-info-circle"></i> 个人简介
          </label>
          <textarea id="bioInput" class="form-control form-textarea" placeholder="输入个人简介..." maxlength="200"></textarea>
          <div class="char-counter">
            <span id="charCount">0</span>/200
          </div>
        </div>
        <div class="action-buttons">
          <button class="btn btn-dark" id="saveBioBtn">
            <i class="fas fa-save"></i> 保存简介
          </button>
        </div>
      </div>

      <!-- 修改密码 -->
      <div class="form-section">
        <h4><i class="fas fa-lock"></i> 修改密码</h4>
        <div class="form-group">
          <label for="oldPassword" class="form-label">
            <i class="fas fa-key"></i> 当前密码
          </label>
          <input type="password" id="oldPassword" class="form-control" placeholder="输入当前密码">
        </div>

        <div class="form-group">
          <label for="newPassword" class="form-label">
            <i class="fas fa-lock"></i> 新密码
          </label>
          <input type="password" id="newPassword" class="form-control" placeholder="输入新密码">
        </div>

        <div class="form-group">
          <label for="confirmPassword" class="form-label">
            <i class="fas fa-lock"></i> 确认新密码
          </label>
          <input type="password" id="confirmPassword" class="form-control" placeholder="再次输入新密码">
          <div class="form-hint">密码长度至少8个字符，包含字母和数字</div>
        </div>

        <div class="action-buttons">
          <button class="btn btn-dark" id="savePasswordBtn">
            <i class="fas fa-save"></i> 更新密码
          </button>
        </div>
      </div>

      <!-- 充值余额 -->
      <div class="form-section">
        <h4><i class="fas fa-wallet"></i> 账户充值</h4>
        <div class="form-group">
          <label for="amountInput" class="form-label">
            <i class="fas fa-money-bill-wave"></i> 充值金额
          </label>
          <input type="number" id="amountInput" class="form-control" placeholder="输入充值金额" min="1" step="0.01">
          <div class="form-hint">最小充值金额为¥1.00</div>
        </div>

        <div class="form-group">
          <label for="paymentMethod" class="form-label">
            <i class="fas fa-credit-card"></i> 支付方式
          </label>
          <select id="paymentMethod" class="form-control">
            <option value="alipay">支付宝</option>
            <option value="wechat">微信支付</option>
            <option value="bank">银行卡支付</option>
          </select>
        </div>

        <div class="action-buttons">
          <button class="btn btn-dark" id="rechargeBtn">
            <i class="fas fa-coins"></i> 立即充值
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 通知 -->
<div class="notification" id="notification">操作成功！</div>

<script>
  // 用户信息（从localStorage中获取）
  let userInfo = JSON.parse(localStorage.getItem('userInfo')) || null;
  let currentUser = null;

  // DOM元素
  const usernameDisplay = document.getElementById('usernameDisplay');
  const profileUsername = document.getElementById('profileUsername');
  const profilePhone = document.getElementById('profilePhone');
  const profileBio = document.getElementById('profileBio');
  const profileBalance = document.getElementById('profileBalance');
  const phoneInput = document.getElementById('phoneInput');
  const savePhoneBtn = document.getElementById('savePhoneBtn');
  const oldPassword = document.getElementById('oldPassword');
  const newPassword = document.getElementById('newPassword');
  const confirmPassword = document.getElementById('confirmPassword');
  const savePasswordBtn = document.getElementById('savePasswordBtn');
  const amountInput = document.getElementById('amountInput');
  const rechargeBtn = document.getElementById('rechargeBtn');
  const notification = document.getElementById('notification');

  // 新增元素
  const bioInput = document.getElementById('bioInput');
  const saveBioBtn = document.getElementById('saveBioBtn');
  const charCount = document.getElementById('charCount');

  // API 基础URL
  const API_BASE_URL = 'http://localhost:8080';

  // 初始化页面
  document.addEventListener('DOMContentLoaded', function() {
    // 更新用户信息显示
    updateUserInfo();

    // 获取用户详细信息
    fetchUserDetails();

    // 设置事件监听器
    setupEventListeners();
  });

  // 更新用户信息显示
  function updateUserInfo() {
    if (userInfo) {
      usernameDisplay.textContent = userInfo.username || '游客';
    } else {
      // 如果用户未登录，跳转到登录页
      window.location.href = 'login.html';
    }
  }

  // 获取用户详细信息
  function fetchUserDetails() {
    if (!userInfo || !userInfo.userId) return;

    fetch(`${API_BASE_URL}/user/info/${userInfo.userId}`)
            .then(response => response.json())
            .then(user => {
              currentUser = user;
              updateProfileDisplay(user);
            })
            .catch(error => {
              console.error('获取用户详情失败:', error);
              showNotification('获取用户信息失败', true);
            });
  }

  // 更新个人信息显示
  function updateProfileDisplay(user) {
    profileUsername.textContent = user.uName || '未设置';
    profilePhone.textContent = user.uPhoneNumber || '未设置';

    // 更新个人简介显示
    const bioContent = user.uBio || '这个人很懒，什么都没有留下...';
    profileBio.textContent = bioContent;

    // 设置简介输入框的值
    bioInput.value = bioContent;

    // 更新字符计数
    charCount.textContent = bioContent.length;
    updateCharCounterStyle(bioContent.length);

    profileBalance.textContent = `¥${user.uBalance ? user.uBalance.toFixed(2) : '0.00'}`;

    // 设置电话输入框的值为当前电话
    phoneInput.value = user.uPhoneNumber || '';
  }

  // 更新字符计数器样式
  function updateCharCounterStyle(length) {
    charCount.textContent = length;

    if (length > 180) {
      charCount.className = 'error';
    } else if (length > 150) {
      charCount.className = 'warning';
    } else {
      charCount.className = '';
    }
  }

  // 设置事件监听器
  function setupEventListeners() {
    // 用户菜单
    userMenu.addEventListener('click', function() {
      dropdownMenu.classList.toggle('show');
    });

    // 关闭用户菜单（点击页面其他地方）
    window.addEventListener('click', function(e) {
      if (!userMenu.contains(e.target)) {
        dropdownMenu.classList.remove('show');
      }
    });

    // 退出登录
    document.getElementById('logoutLink').addEventListener('click', function(e) {
      e.preventDefault();
      localStorage.removeItem('userInfo');
      window.location.href = 'login.html';
    });

    // 保存电话
    savePhoneBtn.addEventListener('click', function() {
      const newPhone = phoneInput.value.trim();

      if (!newPhone) {
        showNotification('请输入新的电话号码', true);
        return;
      }

      if (newPhone === currentUser.uPhoneNumber) {
        showNotification('电话号码未改变', true);
        return;
      }

      // 更新用户电话
      updatePhone(newPhone);
    });

    // 新增：保存个人简介
    saveBioBtn.addEventListener('click', function() {
      const newBio = bioInput.value.trim();

      if (!newBio) {
        showNotification('个人简介不能为空', true);
        return;
      }

      if (newBio === currentUser.uBio) {
        showNotification('个人简介未改变', true);
        return;
      }

      // 更新个人简介
      updateBio(newBio);
    });

    // 新增：简介输入框字符计数
    bioInput.addEventListener('input', function() {
      const length = this.value.length;
      updateCharCounterStyle(length);
    });

    // 更新密码
    savePasswordBtn.addEventListener('click', function() {
      const oldPass = oldPassword.value.trim();
      const newPass = newPassword.value.trim();
      const confirmPass = confirmPassword.value.trim();

      if (!oldPass || !newPass || !confirmPass) {
        showNotification('请填写所有密码字段', true);
        return;
      }

      if (newPass !== confirmPass) {
        showNotification('两次输入的新密码不一致', true);
        return;
      }

      if (newPass.length < 8) {
        showNotification('密码长度至少为8个字符', true);
        return;
      }

      // 更新密码
      updatePassword(oldPass, newPass);
    });

    // 账户充值
    rechargeBtn.addEventListener('click', function() {
      const amount = parseFloat(amountInput.value);

      if (isNaN(amount)) {
        showNotification('请输入有效的充值金额', true);
        return;
      }

      if (amount <= 0) {
        showNotification('充值金额必须大于0', true);
        return;
      }

      // 执行充值
      rechargeAccount(amount);
    });

    // 我的商品
    document.getElementById('myGoodsLink').addEventListener('click', function(e) {
      e.preventDefault();
      window.location.href = 'my-goods.html';
    });

    // 订单
    document.getElementById('ordersLink').addEventListener('click', function(e) {
      e.preventDefault();
      window.location.href = 'orders.html';
    });

    // 评论
    document.getElementById('commentsLink').addEventListener('click', function(e) {
      e.preventDefault();
      window.location.href = 'my-comments.html';
    });

    // 购物车
    document.getElementById('cartLink').addEventListener('click', function(e) {
      e.preventDefault();
      window.location.href = 'cart.html';
    });

    // 个人资料
    document.getElementById('profileLink').addEventListener('click', function(e) {
      e.preventDefault();
      window.location.href = 'profile.html';
    });
  }

  // 更新电话
  function updatePhone(newPhone) {
    if (!currentUser) return;

    // 显示加载状态
    savePhoneBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
    savePhoneBtn.disabled = true;

    // 创建更新对象
    const updatedUser = {
      uPhoneNumber: newPhone,
      uBio: currentUser.uBio
    };

    // 调用更新API
    fetch(`${API_BASE_URL}/user/update/${currentUser.uId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updatedUser)
    })
            .then(response => {
              if (!response.ok) {
                throw new Error('更新电话失败');
              }
              return response.text();
            })
            .then(message => {
              // 更新本地用户信息
              currentUser.uPhoneNumber = newPhone;
              updateProfileDisplay(currentUser);
              showNotification('电话更新成功');
            })
            .catch(error => {
              console.error('更新电话失败:', error);
              showNotification('更新电话失败: ' + error.message, true);
            })
            .finally(() => {
              savePhoneBtn.innerHTML = '<i class="fas fa-save"></i> 保存更改';
              savePhoneBtn.disabled = false;
            });
  }

  // 新增：更新个人简介
  function updateBio(newBio) {
    if (!currentUser) return;

    // 显示加载状态
    saveBioBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
    saveBioBtn.disabled = true;

    // 创建更新对象
    const updatedUser = {
      uBio: newBio,
      uPhoneNumber: currentUser.uPhoneNumber
    };

    // 调用更新API
    fetch(`${API_BASE_URL}/user/update/${currentUser.uId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(updatedUser)
    })
            .then(response => {
              if (!response.ok) {
                throw new Error('更新简介失败');
              }
              return response.text();
            })
            .then(message => {
              // 更新本地用户信息
              currentUser.uBio = newBio;
              updateProfileDisplay(currentUser);
              showNotification('个人简介更新成功');
            })
            .catch(error => {
              console.error('更新简介失败:', error);
              showNotification('更新简介失败: ' + error.message, true);
            })
            .finally(() => {
              saveBioBtn.innerHTML = '<i class="fas fa-save"></i> 保存简介';
              saveBioBtn.disabled = false;
            });
  }

  // 更新密码
  function updatePassword(oldPass, newPass) {
    if (!currentUser) return;

    // 显示加载状态
    savePasswordBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 更新中...';
    savePasswordBtn.disabled = true;

    // 创建请求对象
    const requestData = {
      userId: currentUser.uId,
      oldPassword: oldPass,
      newPassword: newPass
    };

    // 调用更新密码API
    fetch(`${API_BASE_URL}/user/updatePassword`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(requestData)
    })
            .then(response => {
              if (!response.ok) {
                return response.text().then(text => { throw new Error(text) });
              }
              return response.text();
            })
            .then(message => {
              // 清空密码字段
              oldPassword.value = '';
              newPassword.value = '';
              confirmPassword.value = '';

              showNotification('密码更新成功');
            })
            .catch(error => {
              console.error('更新密码失败:', error);
              showNotification('更新密码失败: ' + error.message, true);
            })
            .finally(() => {
              savePasswordBtn.innerHTML = '<i class="fas fa-save"></i> 更新密码';
              savePasswordBtn.disabled = false;
            });
  }

  // 账户充值
  function rechargeAccount(amount) {
    if (!currentUser) return;

    // 显示加载状态
    rechargeBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 充值中...';
    rechargeBtn.disabled = true;

    // 创建充值请求对象
    const requestData = {
      userId: currentUser.uId,
      amount: amount
    };

    // 调用充值API
    fetch(`${API_BASE_URL}/user/recharge`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(requestData)
    })
            .then(response => {
              if (!response.ok) {
                return response.text().then(text => { throw new Error(text) });
              }
              return response.json();
            })
            .then(updatedUser => {
              // 更新本地用户信息
              currentUser = updatedUser;
              updateProfileDisplay(updatedUser);
              amountInput.value = '';
              showNotification(`充值成功 ¥${amount.toFixed(2)}`);
            })
            .catch(error => {
              console.error('充值失败:', error);
              showNotification('充值失败: ' + error.message, true);
            })
            .finally(() => {
              rechargeBtn.innerHTML = '<i class="fas fa-coins"></i> 立即充值';
              rechargeBtn.disabled = false;
            });
  }

  // 显示通知
  function showNotification(message, isError = false) {
    notification.textContent = message;
    notification.className = 'notification';

    if (isError) {
      notification.classList.add('error');
    }

    // 显示通知
    notification.style.display = 'block';

    setTimeout(() => {
      notification.style.display = 'none';
    }, 3000);
  }
</script>
</body>
</html>